<template>
  <view class="input-number">
    <view class="input-number-reduce" @tap="reduce" @longtap="longReduce" @touchend="touchendReduce">-</view>
    <view class="input-number-inner"><input type="number" disabled :cursor-spacing="20" :value="currentValue" /></view>
    <view class="input-number-add" @tap="add" @longtap="longAdd" @touchend="touchendAdd">+</view>
  </view>
</template>

<script>
let timer = null;
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    step: {
      type: Number,
      default: 1
    },
    longStep: {
      type: Number,
      default: 10
    },
    // 最小值
    min: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentValue: this.value > this.value ? this.value : this.min
    };
  },
  watch: {
    currentValue(n) {
      if (n < this.min) {
        this.currentValue = this.min;
        this.$emit("input", this.min);
      } else {
        this.$emit("input", n);
      }
    }
  },
  methods: {
    add() {
      this.currentValue = Number(this.currentValue) + Number(this.step);
    },
    longAdd(e) {
      timer = setInterval(() => {
        this.currentValue = Number(this.currentValue) + Number(this.longStep);
      }, 500);
    },
    touchendReduce() {
      clearInterval(timer);
    },
    reduce() {
      this.currentValue = Number(this.currentValue) - Number(this.step);
    },
    longReduce() {
      timer = setInterval(() => {
        this.currentValue = Number(this.currentValue) - Number(this.longStep);
      }, 500);
    },
    touchendAdd() {
      clearInterval(timer);
    }
  }
};
</script>
<style lang="scss" scoped>
$border-color: #eeeeee;
$size: 55upx;
$width: $size - 10upx;
.input-number {
  overflow: hidden;
  z-index: 0;
}
.input-number-reduce,
.input-number-add {
  float: left;
  font-size: 30upx;
  width: $width;
  height: $size;
  text-align: center;
  line-height: $size;
}
.input-number-reduce {
  height: 100%;
  border: 1upx solid $border-color;
}
.input-number-add {
  height: 100%;
  border: 1upx solid $border-color;
}
.input-number-inner {
  height: 100%;
  border-top: 1upx solid $border-color;
  border-bottom: 1upx solid $border-color;
  float: left;
  width: calc(100% - #{$width * 2});
  input {
    font-size: 26upx;
    width: 100%;
    height: $size !important;
    line-height: $size !important;
  }
}
</style>
